<template>
    <div id="app1">
        <button @click="modify(0.1)">放大</button>
        <button @click="modify(-0.1)">缩小</button>

        <div class="container">
            <div ref="imageContainer" id="image-container" :style="containerStyle" class="draggable-area"
                @mousedown="startDrag">

                <div v-for="(marker, index) in markers" :key="index" class="dynamic-marker"
                    :style="markerStyle(marker)">
                </div>
            </div>

            <div class="marker-source">
                <div class="marker" draggable="true" @dragstart="dragStart('red')">🔴</div>
                <div class="marker" draggable="true" @dragstart="dragStart('blue')">🔵</div>
            </div>
        </div>
    </div>

</template>


<script>

export default {
    data() {
        return {
            markers: [],
            scale: 1,
            isDragging: false,
            startX: 0,
            startY: 0,
            offsetX: 0,
            offsetY: 0,
            currentScale: 1,
            dragType: null
        }
    },
    computed: {
        containerStyle() {
            return {
                transform: `scale(${this.currentScale})`,
                left: `${this.offsetX}px`,
                top: `${this.offsetY}px`
            }
        }
    },
    methods: {
        markerStyle(marker) {
            return {
                left: `${marker.x}%`,
                top: `${marker.y}%`,
                background: marker.type
            }
        },
        startDrag(e) {
            if (e.target === this.$refs.imageContainer) {
                this.isDragging = true;
                const rect = this.$refs.imageContainer.getBoundingClientRect();
                this.startX = e.clientX - rect.left;
                this.startY = e.clientY - rect.top;
                document.addEventListener('mousemove', (e) => this.dragMove(e));

                document.addEventListener('mouseup', (e) => this.endDrag(e));
            }
        },
        dragMove(e) {
            if (this.isDragging) {
                const newX = e.clientX - this.startX;
                const newY = e.clientY - this.startY;

                const maxX = window.innerWidth - this.$refs.imageContainer.offsetWidth;
                const maxY = window.innerHeight - this.$refs.imageContainer.offsetHeight;

                this.offsetX = Math.min(Math.max(newX, 0), maxX);
                this.offsetY = Math.min(Math.max(newY, 0), maxY);
            }
        },
        endDrag() {
            this.isDragging = false;
            document.removeEventListener('mousemove', this.dragMove);
            document.removeEventListener('mouseup', this.endDrag);
        },
        dragStart(type) {
            this.dragType = type;
        },
        handleDrop(e) {
            e.preventDefault();
            const rect = this.$refs.imageContainer.getBoundingClientRect();

            const x = ((e.clientX - rect.left) / rect.width * 100).toFixed(2);
            const y = ((e.clientY - rect.top) / rect.height * 100).toFixed(2);

            this.markers.push({
                x,
                y,
                type: this.dragType
            });
        },
        modify(num) {
            this.currentScale = Math.max(0.1, this.currentScale + num);
        }
    },
    mounted() {
        let container = this.$refs.imageContainer;


        container.addEventListener('dragover', e => {
            e.preventDefault();
            container.classList.add('drag-over');
        });

        container.addEventListener('dragleave', () => {
            container.classList.remove('drag-over');
        });

        container.addEventListener('drop', this.handleDrop);
    }
}
</script>


<style scoped>
.draggable-area {
    position: absolute;
    cursor: move;
    transition: transform 0.3s;
    /* 平滑过渡 */
}

.drag-over {
    box-shadow: 0 0 15px rgba(0, 150, 255, 0.5);
    /* 拖放反馈 */
}

.marker-source {
    position: fixed;
    right: 20px;
    top: 20px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.marker {
    cursor: grab;
    padding: 8px;
    margin: 5px;
    transition: transform 0.2s;
}

.dynamic-marker {
    position: absolute;
    pointer-events: none;
    /* 防止干扰拖拽 */
    transform: translate(-50%, -50%);
    font-size: 24px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
}

#image-container {
    width: 800px;
    height: 500px;
    /* background-color: antiquewhite; */
    background-image: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/8b7efab79cadcb9fe7c07dbc21239251.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_2560%2ch_1440);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform-origin: top left;
    margin-top: 40px;
}
</style>